<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>绑定卡片</title>
    <link rel="stylesheet" href="/static/weui-1.0.2/dist/style/weui.css"/>
    <link rel="stylesheet" href="/static/weui-1.0.2/dist/example/example.css"/>
    <script src="/static/admin/css/jquery-3.0.0.min.js"></script>
</head>
<style>
    .you{
        margin-left:17px;
    }
    h2{
        padding: 4px .2em;
        color:#225fba;
        text-align: center;
    }

</style>
<body>

    <div class="page__hd" style="margin: 0 auto;">
        <h2>绑定卡片</h2>
    </div>
    <div class="page__bd">
        <div class="weui-cells weui-cells_checkbox">
            <label class="weui-cell weui-check__label" >
                <div class="weui-cell__hd">
                    <img src="/static/weui-1.0.2/img/kp.png" width="20" alt="">
                </div>
                <div class="weui-cell__bd you" >
                    <input class="weui-input card" type="number" value="" placeholder="请输入持有的IC卡号"/>
                </div>
            </label>
            <label class="weui-cell weui-check__label" >
                <div class="weui-cell__hd">
                    <img src="/static/weui-1.0.2/img/xs.png" width="20" alt="">
                </div>
                <div class="weui-cell__bd you">
                    <input class="weui-input user" type="text"  placeholder="请输入学生姓名"/>
                </div>
            </label>
            <label class="weui-cell weui-check__label" >
                <div class="weui-cell__hd">
                    <img src="/static/weui-1.0.2/img/xs.png" width="20" alt="">
                </div>
                <div class="weui-cell__bd you">
                    <input class="weui-input fid" type="hidden"  placeholder="请输入卡id"/>
                </div>
            </label>
            <label class="weui-cell weui-check__label" >
                <div class="weui-cell__hd">
                    <img src="/static/weui-1.0.2/img/xs.png" width="20" alt="">
                </div>
                <div class="weui-cell__bd you">
                    <input class="weui-input userid" type="hidden"  placeholder="请输入学生id"/>
                </div>
            </label>
            <label class="weui-cell weui-check__label" >
                <div class="weui-cell__hd">
                    <img src="/static/weui-1.0.2/img/bj.png" width="20" alt="">
                </div>
                <div class="weui-cell__bd bj">
                    <select class="weui-select " name="class">
                        <option value="">请选择班级</option>
                    </select>
                </div>
            </label>
        </div>

        <div class="weui-btn-area">
            <a class="weui-btn weui-btn_primary tj" href="javascript:" style="width:70%" id="showTooltips">下一步</a>
        </div>
    </div>


</body>
</html>
<script>
    $('#showTooltips').click(function () {
        var fid = $('.fid').val();
        var user = $('.user').val();
        var userid = $('.userid').val();
        var card = $('.card').val();
        var bj = $('.class').val();
        alert(card+'--'+user+'--'+userid+'--'+bj);
        return false;
        location.href = "{:url('upload_avatar')}";
        return;
    })

    $('.card').change(function () {
        var card = $(this).val();
        card = $.trim(card);
        if(card == ''){
            layer.alert('卡号不能为空');
            return false;
        }

        $.ajax({
            url : "{:url('get_class')}",
            type : 'post',
            data :{card:card},
            async : false,
            success : function (e) {
                console.log(e);
                if(e.code != 0){
                   layer.alert(e.msg);
                }else{
                    var list = e.list;
                    //添加学生名
                    $('.user').val(list.fname);
                    $('.fid').val(list.fid);
                    $('.userid').val(list.userid);
                    //添加班级
                    var info = list.data;
                    var html = '<select class="weui-select class" name="class"><option value="">请选择班级</option>';
                    $(info).each(function (k,v) {
                        html += '<option value="'+v.FId+'">'+v.FName+'</option>'
                    });
                    $('.bj').html(html);

                }
            }
        });

    })


</script>